<template>
  <view class="container">
    
    <!-- 每日练习（左右轮播） -->
    <Card class="practice-card">
      <view class="card-header">
        <text class="card-title">今日打卡目标</text>
        <!-- 打卡数量 -->
        <text class="card-title">数量：{{ practiceItems.length }}</text>
      </view>
      <swiper
        class="practice-swiper"
        :indicator-dots="false"
        :autoplay="false"
        :interval="5000"
        :duration="300"
        circular
      >
        <swiper-item v-for="(pair, idx) in practiceItemPairs" :key="idx">
          <view class="practice-slide">
            <view
              v-for="(item, j) in pair"
              :key="j"
              class="practice-item"
              :class="{ 'item-word': item.action === 'word', 'item-reading': item.action === 'reading' }"
              @click="onPracticeClick(item.action)"
            >
              <view class="practice-icon">{{ item.icon }}</view>
              <view class="practice-title">{{ item.title }}</view>
              <view class="practice-desc">{{ item.desc }}</view>
              <view class="action-btn">{{ item.btnText }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </Card>
    
    <!-- 功能模块 -->
    <view class="modules">
      <view class="module-row">
        <Card class="module-card" clickable @click="goToGoals">
          <view class="module-icon goal-icon">🎯</view>
          <text class="module-title">我的目标</text>
        </Card>
        
        <Card class="module-card" clickable @click="goToPlans">
          <view class="module-icon plan-icon">📝</view>
          <text class="module-title">学习计划</text>
        </Card>
      </view>
      
      <view class="module-row">
        <Card class="module-card" clickable @click="goToWishPool">
          <view class="module-icon wish-icon">🎁</view>
          <text class="module-title">许愿池</text>
        </Card>
  
      </view>
    </view>
    
  </view>
</template>

<script>
import { getStorage } from '../../utils/storage.js';

export default {
  data() {
    return {
      userInfo: {
        username: '',
        nickname: '',
        avatar: ''
      },
      points: 180,
      plancount:0,
      practiceItems: [
        {
          action: 'word',
          icon: '📘',
          title: '单词速记',
          desc: '为你推荐日常沟通必备、零基础入门、四级词汇…',
          btnText: '去打卡'
        },
        {
          action: 'reading',
          icon: '⏰',
          title: '每日晨读',
          desc: 'She works at a restaurant in the touri…',
          btnText: '去打卡'
        },
        {
          action: 'word',
          icon: '📘',
          title: '单词速记1',
          desc: '为你推荐日常沟通必备、零基础入门、四级词汇…',
          btnText: '去打卡'
        },
        {
          action: 'reading',
          icon: '⏰',
          title: '每日晨读1',
          desc: 'She works at a restaurant in the touri…',
          btnText: '去打卡'
        }
      ]
    };
  },
  
  onLoad() {
    // 获取用户信息
    const userInfo = getStorage('userInfo');
    if (userInfo) {
      this.userInfo = userInfo.user || userInfo;
      const role = userInfo.userRole || userInfo.user?.userRole;
      if (role === 'GUARDIAN') {
        uni.switchTab({ url: '/pages/home/main-account' });
        return;
      }
    } else {
      // 无用户信息时默认走学生视图，无跳转
    }
  },
  computed: {
    practiceItemPairs() {
      const pairs = [];
      for (let i = 0; i < this.practiceItems.length; i += 2) {
        pairs.push(this.practiceItems.slice(i, i + 2));
      }
      return pairs;
    }
  },
  onShow() {
    const userInfo = getStorage('userInfo');
    const role = userInfo?.userRole || userInfo?.user?.userRole;
    if (role === 'GUARDIAN') {
      uni.switchTab({ url: '/pages/home/main-account' });
    }
  },
  
  methods: {
    onPracticeClick(action) {
      if (action === 'word') {
        this.onWordFastClick();
        return;
      }
      if (action === 'reading') {
        this.onMorningReadingClick();
        return;
      }
    },
    onWordFastClick() {
      uni.showToast({ title: '即将进入单词速记', icon: 'none' });
    },
    onMorningReadingClick() {
      uni.showToast({ title: '即将进入每日晨读', icon: 'none' });
    },
    
    goToGoals() {
      uni.navigateTo({
        url: '/pages/goal/list'
      });
    },
    
    goToPlans() {
      uni.navigateTo({
        url: '/pages/plan/list'
      });
    },
    
    goToWishPool() {
      uni.navigateTo({
        url: '/pages/wish/pool'
      });
    },
    
    goToPoints() {
      uni.navigateTo({
        url: '/pages/reward/manage'
      });
    },
    
    goToProfile() {
      uni.navigateTo({
        url: '/pages/account/profile'
      });
    },
    
    goToNotifications() {
      uni.navigateTo({
        url: '/pages/notification/list'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.user-card {
  margin-bottom: $spacing-base;
}

.user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: $spacing-base;
  overflow: hidden;
  background-color: $primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  color: #fff;
  font-size: $font-size-sm;
}

.user-details {
  flex: 1;
}

.username {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.user-type {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.points-info {
  text-align: right;
}

.points-label {
  font-size: $font-size-sm;
  color: $text-secondary;
  display: block;
  margin-bottom: $spacing-xs;
}

.points-value {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $primary-color;
}

.tasks-card {
  margin-bottom: $spacing-base;
}

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.task-count {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.tasks-list {
  margin-top: $spacing-sm;
}

.task-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &.completed {
    background-color: rgba($secondary-color, 0.05);
    border-color: rgba($secondary-color, 0.3);
  }
  
  &.in-progress {
    background-color: rgba($primary-color, 0.05);
    border-color: rgba($primary-color, 0.3);
  }
}

/* 每日练习样式 */
.practice-card {
  margin-bottom: $spacing-base;
}

.practice-swiper {
  height: 420rpx;
}

.practice-item {
  height: 330rpx;
  width: 46%;
  margin: 0 $spacing-sm $spacing-sm;
  padding: $spacing-base;
  border-radius: 12rpx;
  background: #f6f7fb;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.practice-slide {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 $spacing-sm;
}

.item-word {
  background: linear-gradient(135deg, #dff7ea, #e9fbef);
}

.item-reading {
  background: linear-gradient(135deg, #e6f0ff, #edf4ff);
}

.practice-icon {
  font-size: 56rpx;
}

.practice-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.practice-desc {
  font-size: $font-size-s;
  color: $text-secondary;
}

.action-btn {
  align-self: flex-start;
  margin-top: $spacing-xs;
  padding: 12rpx 28rpx;
  background: #ffffff;
  color: $text-primary;
  border-radius: 999rpx;
  font-size: $font-size-sm;
}

.task-info {
  flex: 1;
}

.task-title {
  font-size: $font-size-base;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.task-time {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.task-status {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.modules {
  margin-bottom: 120rpx;
}

.module-row {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-base;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.module-card {
  flex: 1;
  margin-right: $spacing-sm;
  text-align: center;
  padding: $spacing-lg $spacing-base;
  
  &:last-child {
    margin-right: 0;
  }
}

.module-icon {
  font-size: 60rpx;
  margin-bottom: $spacing-sm;
}

.module-title {
  font-size: $font-size-sm;
  color: $text-primary;
}

.bottom-menu {
  position: fixed;
  bottom: 20rpx;
  left: $spacing-base;
  right: $spacing-base;
}

.menu-card {
  display: flex;
  flex-direction: row;
}

.menu-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: $spacing-base 0;
  
  &:first-child {
    border-right: 1rpx solid $text-tertiary;
  }
}

.menu-icon {
  font-size: $font-size-lg;
  margin-right: $spacing-sm;
}

.menu-text {
  font-size: $font-size-base;
  color: $text-primary;
}
</style>